<template>
  <div class="header">
    <!-- Logo -->
    <div class="logo-module">
      <!--<img src="https://s.weituibao.com/1582958061265/mlogo.png" alt="logo"/>-->
      <h2 class="logo-title">{{ siteInfo.title }}</h2>
    </div>
    <!--MODULE -->
    <div class="module">
      <div class="menu-module" style="width: calc(100% - 300px)">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          :default-active="activeIndex.toString()"
          @select="clickMenu"
          router
        >
          <el-menu-item v-for="d in menus" :key="d.id"
            :index="d.path"
            :route="d.path">{{ d.title }}
          </el-menu-item>
        </el-menu>
      </div>
      <div class="info-module">
        <el-dropdown trigger="hover">
          <span class="el-dropdown-link">
          {{ userInfo && userInfo.username }}
            <el-icon class="el-icon-arrow-down el-icon--right"/>
          </span>
          <template #dropdown>
            <el-dropdown-item>清除缓存</el-dropdown-item>
            <el-dropdown-item @click="setPassword">修改密码</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { local } from "../utils/storage";

export default {
  name: 'Header',
  props: {
    clickMenu: Function,
    activeIndex: Number,
  },
  setup() {
    const router = useRouter();
    const state = reactive({
      name: 'dashboard',
      userInfo: null,
      siteInfo: {},
      menus: [
        { id: 10, title: '首页', path: '/' },
        { id: 20, title: '会员', path: '/user' },
        { id: 30, title: '商品', path: '/goods/category' },
        { id: 40, title: '订单', path: '/order' },
        { id: 55, title: '分销', path: '/bonuspool' },
        { id: 60, title: '店铺', path: '/shop' },
        { id: 70, title: '创客', path: '/maker/activity' },
        { id: 90, title: '系统', path: '/config/web' },
      ]
    });
    onMounted(() => {
      state.siteInfo = local.get('ADMIN.SITE')

      const pathname = window.location.hash.split('/')[1] || '';
      if (!['login'].includes(pathname)) {
        getUserInfo();
      }
    });

    const getUserInfo = async () => {
      state.userInfo = local.get('ADMIN.USERINFO')
    };
    const logout = () => {
      local.remove('ADMIN.TOKEN')
      local.remove('ADMIN.USERINFO')
      window.location.reload();
    };

    const setPassword = () => {
      router.push({ path: '/account' })
    }

    return {
      ...toRefs(state),
      setPassword,
      logout,
    };
  },
};
</script>

<style scoped>

.header {
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 2px 0 10px 0 #8c939d;
}


.info-module {
  width: 100px;
  text-align: center;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-width: 3px;
}

.logo-module {
  width: 250px;
  height: 58px;
  line-height: 58px;
  padding: 0;
}

.logo-module .logo-title {
  margin: 0;
  color: #409eff;
  text-align: center;
  cursor: pointer;
}

.logo-module img {
  width: 72%;
  transform: translate(20px, -55px);
}

.module {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.el-menu .el-menu-item {
  font-size: 16px;
  font-weight: 600;
}

.info-module {
  padding-right: 20px;
  color: #999;
}

.info-module > div > .icon {
  font-size: 18px;
  margin-right: 6px;
}

.author {
  margin-left: 10px;
  cursor: pointer;
}
</style>
<!--<style>-->
<!--.el-dropdown-link {-->
<!--  cursor: pointer;-->
<!--  color: #409EFF;-->
<!--}-->

<!--.el-icon-arrow-down {-->
<!--  font-size: 12px;-->
<!--}-->

<!--body .el-dropdown__popper.el-popper[role=tooltip] {-->
<!--  box-shadow: 3px 3px 5px 0 rgb(53 53 53 / 30%) !important;-->
<!--}-->
<!--</style>-->
